<template>
    <!-- Echarts 的容器 -->
    <div ref="chart" style="width: 100%; height: 200px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    // 绘制图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart);

      // 指定图表配置项和数据
      var option = {
  xAxis: {
    type: 'category',
    data: ['堂食', '外卖'],
    axisLine: {
              lineStyle: {
                color: "white", // 设置轴线颜色为白色
              },
            }
  },
  yAxis: {
    type: 'value',
    axisLine: {
              lineStyle: {
                color: "white", // 设置轴线颜色为白色
              },
            },
  },
  series: [
    {
      data: [20, 7],
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        formatter: '{c}',
        color: '#fff', // 标签颜色为白色
        fontSize: 14, // 标签字体大小
        fontWeight: 'bold', // 标签字体加粗
        formatter: function (params) { // 格式化标签，保留两位小数
          var val = parseFloat(params.value).toFixed(2);
          return val;
        },
      }
    }
  ]
};

      myChart.setOption(option);
    },
  },
};
</script>
